<template>
    <div class="outmain ba_f goodList">
        <div class="shuju_title mar_b20">
            <div class="shuju_title_text">
                <span>订单处理</span>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="新订单" name="1"></el-tab-pane>
            <el-tab-pane label="待配送" name="6"></el-tab-pane>
            <el-tab-pane label="预订单提醒" name="2"></el-tab-pane>
            <!--            <el-tab-pane label="配送异常" name="3"></el-tab-pane>-->
            <el-tab-pane label="催单" name="3"></el-tab-pane>
            <el-tab-pane label="退单/售后" name="4"></el-tab-pane>
<!--            <el-tab-pane label="退单" name="5"></el-tab-pane>-->
            <!--            <el-tab-pane label="出餐慢" name="7"></el-tab-pane>-->
        </el-tabs>
        <div class="processing-container mar_t10">
          <div class="list-container">
            <div class="list-wrapper mar_lr10 pad_tb_20 flex-bet curs bor_rad5">
              <div class="flex">
                <div class="list-title">
                  <div class="circle">
                    <div class="title-circle"></div>
                  </div>
                </div>
                <div>
                  <p class="list-title-header fon_15 color_3">自动接单</p>
                  <span class="fon_12 color_9">开启自动接单后，新订单将自动接单并打印小票（注意：防止漏单，此功能建议配合小票机使用）</span>
                </div>
              </div>
              <div class="mar_r20">
                <el-switch v-model="zdjd" active-value="1" inactive-value="2" @change="changeSwitch2"></el-switch>
              </div>
            </div>
          </div>
            <div class="flex-bet flex-y-top">
              <div class="bflex-7">
                <order-state ref="orderState" :state="activeName" v-show="breadCrumbList.data && breadCrumbList.data.length<=0"></order-state>
                <order-list ref="orderList" :active="activeName" :list="breadCrumbList.data"  @initMethod="init"></order-list>
              </div>
              <div class="bflex-3 mar_t20 mar_l30" v-if="breadCrumbList.data && breadCrumbList.data.length>0">
                <div class="shuju_title mar_b10" style="background: #F9F9F9;font-size: 14px">
                  <div class="shuju_title_text">
                    <span>当日订单情况</span>
                  </div>
                </div>
                <div class="orderGk pad_10 flex-bet color_6">
                  <div class="flex-g-1 t_c bor_r_de4">
                    <div>有效订单（单）</div>
                    <div class="fon_40">{{ orderStatistic.orderNum || 0 }}</div>
                  </div>
                  <div class="flex-g-1 t_c">
                    <div>营业额（元）</div>
                    <div class="fon_40">{{ orderStatistic.money || 0.00 }}</div>
                  </div>
                </div>
              </div>
            </div>
<!--            <order-switch ref="orderSwitch" v-if="activeName=='1'"></order-switch>-->
            <div class="list-container">
<!--                <div class="list-wrapper mar_lr10 pad_tb_20 flex-bet curs">-->
<!--                    <div class="flex">-->
<!--                        <div class="list-title">-->
<!--                            <div class="circle">-->
<!--                                <div class="title-circle"></div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <p class="list-title-header fon_15 color_3">打开自动接单</p>-->
<!--                            <span class="fon_12 color_9">开通自动接单后，在线期间，将自动接单并打印</span>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <el-switch v-model="value"></el-switch>-->
<!--                    </div>-->
<!--                </div>-->
<!--                <div class="list-wrapper mar_lr10 pad_tb_20 flex-bet">-->
<!--                    <div class="flex">-->
<!--                        <div class="list-title">-->
<!--                            <div class="circle">-->
<!--                                <div class="title-circle list-title-error"></div>-->
<!--                            </div>-->
<!--                        </div>-->
<!--                        <div>-->
<!--                            <p class="fon_15 color_3">2 单待出餐</p>-->
<!--                            <span class="fon_12 color_9">确认后骑手优先到店</span>-->
<!--                        </div>-->
<!--                    </div>-->
<!--                    <div>-->
<!--                        <span class="switchertext curs" @click="chucanList">去出餐</span>-->
<!--                    </div>-->
<!--                </div>-->
                <el-dialog
                        title="待出餐订单"
                        :visible.sync="dialogVisible"
                        width="30%"
                >
                    <div>
                        <div class="flex pad_lr_20 bor_b_df5 mar_b10 pad_b_10">
                            <div class="flex-g-0 subjectcolor2 fon_30">3</div>
                            <div class="flex-g-1 mar_l20">
                                <div>请尽快出餐</div>
                                <div class="color_9">顾客：朱先生</div>
                            </div>
                            <div class="flex-g-0">
                                <el-button type="primary">确认出餐</el-button>
                            </div>
                        </div>
                        <div class="flex pad_lr_20 bor_b_df5 mar_b10 pad_b_10">
                            <div class="flex-g-0 subjectcolor2 fon_30">4</div>
                            <div class="flex-g-1 mar_l20">
                                <div>请尽快出餐</div>
                                <div class="color_9">顾客：王先生</div>
                            </div>
                            <div class="flex-g-0">
                                <el-button type="primary" @click="qrchMethod">确认出餐</el-button>
                            </div>
                        </div>
                    </div>
                </el-dialog>
            </div>
        </div>
        <el-pagination
                background
                layout="prev, pager, next"
                :total="page.total"
                :page-size="page.size"
                :current-page.sync='page.currentPage'
                :hide-on-single-page="page.value"
                @current-change="handleCurrentChange">
        </el-pagination>
    </div>
</template>

<script>
    import OrderList from "./components/orderList";
    import OrderState from "./components/orderState";
    // import orderSwitch from "./components/orderSwitch";
    import {orderList, orderStatistic} from "@/api/order";
    import { mapState, mapActions } from 'vuex'
    import {changeShopStatus, getChangeShopStatus} from "@/api/statistics";

    export default {
        components: {OrderList, OrderState,},
        created() {
            this.bus.$emit('loading', true);
            this.init();
          this.getChangeShopStatus()
            // this.$store.configData.dispatch('selectOrderList',{})
        },
        computed: {
            ...mapState(['orderList']),
            breadCrumbList() {
                return this.orderList || []
            },
        },
        data() {
            return {
                activeName: '1',
                orderlist: [],
                page: {
                    total: 0,
                    size: 10,
                    currentPage: 1,
                    value: true,
                },
                zdjd:'',
                value:'',
                dialogVisible: false,
                orderStatistic:{},
            };
        },
        methods: {
            ...mapActions(['getStoreOrderList']),
            handleClick() {
                this.init()
            },
            async init() {
                var params = {
                    page: this.page.currentPage,
                    state: this.activeName,
                }
                await this.getStoreOrderList(params)
                // this.orderlist = this.breadCrumbList.data
                this.page.total = this.breadCrumbList.count;
                if (this.breadCrumbList.count > 0) {
                    this.page.value = false
                }else {
                    this.page.value = true
                }
                this.$emit('orderList', this.breadCrumbList.data)
                this.bus.$emit('loading', false)
                // return
                // const {data, count} = await orderList(params);
                // this.orderlist = data
                // this.page.total = count;
                // if (count > 0) {
                //     this.page.value = false
                // }else {
                //     this.page.value = true
                // }
                // this.$emit('orderList', data)
                // this.bus.$emit('loading', false)
            },
            handleCurrentChange(val) {
                this.page.currentPage = val;
                this.init();
            },
            chucanList(){
                this.dialogVisible = true
            },
            qrchMethod(){
                console.log('123')
                this.$refs.orderList.orderListQrch('aaa');
            },
          async fforderStatistic(){
            const { data } = await orderStatistic();
            this.orderStatistic = data;
          },
          async getChangeShopStatus(){
            const {data} = await getChangeShopStatus({storeId:'',});
            this.zdjd = data.receiveStatus
          },
          async changeSwitch2() {
            const {msg} = await changeShopStatus({storeId:'', type:2,receiveStatus:this.zdjd});
            this.$baseMessage(msg, "success");
            this.init();
          },
        }
    }
</script>
<style lang="scss" scoped>
    .list-container .list-wrapper {
        //border-top: 1px solid #ebeff5;
        background-color: #f7f8fb;
    }

    //.list-container .list-wrapper:hover {
    //    background-color: #f7f8fb;
    //}

    .list-container div.list-wrapper:last-child {
        //border-bottom: 1px solid #ebeff5;
    }

    .list-title {
        color: #2d2f33;
    }

    .circle {
        width: 50px;
    }

    .title-circle {
        margin: 0 auto;
        width: 9px;
        height: 9px;
        border-radius: 9px;
        background-color: #67c23a;
    }

    .list-title-error {
        background-color: #fa5555;
    }

    .list-title-header {
        font-weight: bold;
    }

    .switchertext {
        color: #1989fa;
    }
    .orderGk{
      background: #F9F9F9;
    }
</style>
